<template>
  <div class="case-event-left-mid">
    <div class="chart-title">
      <span class="title-icon"></span>
      <div class="title-text">分类占比</div>
    </div>
    <screen-chart @initCb="initChart"></screen-chart>
  </div>
</template>

<script lang="ts">
import { pieOptions } from './option'
import { Component, Vue } from 'vue-property-decorator'
import EventBus from '../../../../../utils/eventBus'
import { getCaseTotalPer } from '@/api/situationAwareness/caseEvent/caseEvent'
@Component({
  name: 'case-event-left-mid',
  components: {
  }
})

export default class CaseEventLeftMid extends Vue {
  private pieChartData: any = [
    // {
    //   name: '刑事案件',
    //   value: 2678
    // }, {
    //   name: '行政案件',
    //   value: 1988
    // }, {
    //   name: '外地案件',
    //   value: 1888
    // }, {
    //   name: '外单位案件',
    //   value: 1788
    // }, {
    //   name: '其他案件',
    //   value: 2888
    // }
  ]

  private avaChart: any = null

  private initChart(chart: any): void {
    this.avaChart = chart
    chart.clear()
    setTimeout(() => {
      this.avaChart.setOption(pieOptions({ data: this.pieChartData }))
    }, 200)
  }

  mounted() {
    this.getCaseTotalPer()
  }
  // 获取数据列表
  async getCaseTotalPer () {
    EventBus.$emit('resetMarker')
    const params = {
      dzcode: ''
    }
    try {
      const res: any = await getCaseTotalPer(params)
      res.data.list.forEach((item: any) => {
        const ob = {
          name: item.typeName,
          value: item.typeTotal
        }
        this.pieChartData.push(ob)
      })
      this.initChart(this.avaChart)
      EventBus.$emit('getCaseTotalPer', res.data.total)
    } catch (err) {
      console.error(err)
    }
  }
}
</script>

<style lang="scss" scoped>
.case-event-left-mid {
  width: 100%;
  height: 37%;
  position: relative;
  .chart-title {
    position: absolute;
    left: 5%;
    top: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-size: 18px;
    font-family: 'PingFang Regular';
    font-weight: 500;
    color: #FFFFFF;
    .title-icon {
      display: inline-block;
      width: 10px;
      height: 10px;
      background-color: #23fffc;
      border-radius: 50%;
      margin-right: 4px;
    }
  }
}
</style>
